<h1 id="dioxus-0-3-templates-hot-reloading-liveview-and-more">
  Dioxus 0.3 - Templates, Hot Reloading, LiveView, and more
</h1>
<p>
  If you’re new here: Dioxus (dye•ox•us) is a library for building React-like
  user interface in Rust. Dioxus supports a ton of targets: web, desktop,
  mobile, TUI, and more. On the web it renders via the DOM and on desktop and
  mobile you can choose between the WebView DOM, WGPU, or Skia.
</p>
<p>Dioxus 0.3 is bringing a <em>lot</em> of fantastic new features:</p>
<ul>
  <li>Massive performance improvements</li>
  <li>Hot reloading for web and desktop</li>
  <li>Autoformatting for RSX via <code>dioxus fmt</code></li>
  <li>New LiveView renderer</li>
  <li>Input widgets for TUI</li>
  <li>Lua plugin system for CLI and overhaul of CLI</li>
  <li>Multi window desktop apps and direct access to Tao/Wry</li>
  <li>
    General improvements to RSX (if chains, for loops, boolean attributes, any
    values)
  </li>
  <li>
    Rusty event types with support for complex techniques like file uploading
  </li>
  <li>Skia renderer and WGPU renderer</li>
  <li>Chinese and Portuguese translations</li>
  <li>A new landing page</li>
</ul>
<p>
  This release represents an absolutely massive jump forward for the Dioxus
  ecosystem. We hope to ship future features more quickly into stable now that
  many of the desired breaking changes have been incorporated into the core
  library.
</p>
<h2 id="templates-and-performance-improvements">
  Templates and performance improvements
</h2>
<p>
  We’ve made huge changes underpinning the architecture of Dioxus. The
  significance of these changes is hard to describe in this simple release
  document, but we did write a blog post about it
  <a href="https://dioxuslabs.com/blog/templates-diffing/">here</a>. Now, Dioxus
  performance is on par with of SolidJS.
</p>
<p>
  <img
    src="https://i.imgur.com/9rbAXP9.png"
    alt="Js-framework-benchmark of Dioxus showing good performance"
  />
</p>
<p>
  Additionally, we’ve reworked how desktop apps stream edits from the native
  thread into the webview, greatly improving performance.
</p>
<h2 id="hot-reloading">Hot Reloading</h2>
<p>
  Dioxus can now update how your app looks without recompiling the underlying
  Rust code. For developers who choose to write their user interfaces with the
  RSX macro, the Dioxus development server will automatically update the
  appearance of a running app whenever the macro body is modified.
</p>
<p>
  We’ve found hot reloading to significantly speed up development cycles, making
  it faster than ever to iterate your app.
</p>
<p>
<video controls autoplay muted>
    <source src="https://i.imgur.com/OzIURca.mp4" type="video/mp4">
</video>
</p>
<p>
  Note that hot reloading works by interpreting the body of RSX macro calls. If
  the hot reloading engine detects a modification unrelated to RSX, then it will
  force a full refresh of the app.
</p>
<h2 id="autoformatting">Autoformatting</h2>
<p>
  Another widely requested feature - autoformatting - is now built into the
  Dioxus CLI and VSCode Extension. Using the same interpreter engine in hot
  reloading, your code can now be formatted automatically. This saves a ton of
  time and ensures consistency between code commits.
</p>
<p>
  Autoformatting can be used via the VSCode Extension which will autoformat as
  you code.
</p>
<p>
<video controls autoplay muted>
    <source src="https://i.imgur.com/aPQEFNO.mp4" type="video/mp4">
</video>
</p>
<p>
  Or directly for use in CI or non-vscode editors with the
  <code>dioxus fmt</code> command.
</p>
<p>
<video controls autoplay muted>
    <source src="https://i.imgur.com/WrNZZdW.mp4" type="video/mp4">
</video>
</p>
<p>
  Autoformatting respects some simple rustfmt features but is still in its early
  stages. If you find any quirks or disagree with the formatting style, feel
  free to file an issue.
</p>
<h2 id="liveview-and-livecomponents">LiveView and LiveComponents</h2>
<p>
  Dioxus 0.3 marks the first official release of dedicated tooling for LiveView.
  LiveView is a new web-app development paradigm that combines the simplicity of
  server-side rendering with the rich interactivity of the
  single-page-application.
</p>
<p>
<video controls autoplay muted>
    <source src="https://i.imgur.com/Eiejo1h.mp4" type="video/mp4">
</video>
</p>
<p>
  Because there’s no frontend build step or need for a dedicated backend,
  writing LiveView apps is easy. LiveView lets you freely mix database access
  into your frontend code, saving the hassle of a dedicated backend. LiveView is
  the fastest way to build a complete app in Rust.
</p>
<pre><code class="lang-rust">async <span class="hljs-function">fn <span class="hljs-title">main</span><span class="hljs-params">()</span> </span>{
    let router = Router::<span class="hljs-keyword">new</span>()
        .route(<span class="hljs-string">"/"</span>, <span class="hljs-keyword">get</span>(move || dioxus_liveview::body(addr))
        .route(<span class="hljs-string">"/app"</span>, <span class="hljs-keyword">get</span>(move |ws| dioxus_liveview::render(ws));

    axum::Server::bind(<span class="hljs-string">"127.0.0.1"</span>.parse().unwrap())
        .serve(router.into_make_service())
        .await;
}

fn app(cx: Scope) -&gt; Element {
        let posts = use_db_query(cx, RECENT_POSTS);

        render! {
                <span class="hljs-keyword">for</span> post in posts {
                        Post { key: <span class="hljs-string">"{post.id}"</span>, data: post }
                }
        }
}
</code></pre>
<h2 id="tui-input-widgets">TUI Input Widgets</h2>
<p>
  Up to this point, Dioxus rendered into the terminal using just static
  elements. Now, with the release of Dioxus 0.3, we’re shipping a collection of
  input widgets for common utilities like buttons, sliders, text inputs,
  checkboxes, and more. These same widgets provide a basis of functionality for
  the native renderers we mention below.
</p>
<p>
  <video controls autoplay muted>
      <source src="https://i.imgur.com/oXQC5o5.mp4" type="video/mp4">
  </video>
</p>
<h2 id="multi-window-desktop-apps">Multi-window Desktop Apps</h2>
<p>
  The Dioxus VirtualDom and tao/wry event loop now share the same scheduler,
  allowing full control of the window and event loop from within your desktop
  and mobile app. This unlocks everything a typical tauri app might have access
  to, allowing Dioxus to share more code with the rest of the Tauri ecosystem.
</p>
<p>
  One big advantage of this is the ability to open and close multiple windows
  from within your Dioxus app. With access to the event loop, you can even get a
  raw window handle, allowing alternative rendering engines like OpenGL or WGPU.
</p>
<p>

  <video controls autoplay muted>
      <source src="https://i.imgur.com/4Yg9FWd.mp4" type="video/mp4">
  </video>
</p>
<h2 id="lowercase-components">Lowercase components</h2>
<p>
  We’ve expanded what can be considered a component. Lowercase components are
  now accepted in the rsx macro provided that they either
</p>
<ul>
  <li>Use the path syntax (ie <code>module::component</code>)</li>
  <li>Container an underscore character</li>
</ul>
<p>
  This is a similar restriction as found in other frameworks. Note that you
  still cannot define a one-word component without referencing it via path
  syntax. We’re hoping to resolve this soon, but it’s not a very easy problem to
  solve.
</p>
<pre><code class="lang-rust"><span class="hljs-selector-tag">header</span> {}              ❌
<span class="hljs-selector-tag">module</span><span class="hljs-selector-pseudo">::header</span> {}      ❌
<span class="hljs-selector-tag">my_header</span> {}           ✅
</code></pre>
<h2 id="for-loops-if-chains-and-more-flexible-rsx">
  For Loops, If Chains, and more flexible RSX
</h2>
<p>
  We’ve made the rsx macro a lot more flexible with some new features to
  simplify lists and if statements.
</p>
<p>
  Before, if you wanted to render a list, you’d need to create an iterator and
  map it to rsx. Now, we apply an automatic transformation of any
  <code>for</code> loop into an iterator. This should make lists more readable!
</p>
<pre><code class="lang-rust"><span class="hljs-keyword">for</span> dog <span class="hljs-keyword">in</span> doggos {
    <span class="hljs-selector-tag">div</span> { key: <span class="hljs-string">"{dog.id}"</span>,  <span class="hljs-string">"Dog: {dog.name}"</span> }
}
</code></pre>
<h2 id="preliminary-wgpu-renderer">Preliminary WGPU renderer</h2>
<p>
  Dioxus 0.3 delivers on another commonly requested feature: native (non-web
  browser) rendering. This new update brings a very young, very unstable, but
  surprisingly capable WGPU renderer. This renderer is the culmination of many
  months of work: collaboration with the Bevy team to revive Taffy (flexbox),
  integration of the new Vello renderer, and research into highly efficient
  incremental screen patching.
</p>
<p>
  The renderer is very raw but already capable of rendering HTML, CSS, and
  responding to user input. We’re actively working on adding accessibility
  support using the work done by EGUI as inspiration.
</p>
<p>
  <video controls autoplay muted>
    <source src="https://i.imgur.com/NVp4COt.mp4" type="video/mp4">
  </video>
</p>
<h2 id="skia-renderer">Skia Renderer</h2>
<p>
  While not exactly a Dioxus Labs project, we wanted to make sure to call out
  the new Freya editor for Dioxus which uses Skia instead of Vello. Freya takes
  a different approach from Dioxus-Native in that instead of adhering to HTML
  and CSS, it sets its own styling and layout strategy. This has a different
  learning curve - you can’t take your CSS knowledge with you, but you get a
  styling system better designed for the job.
</p>
<p>
  Freya is already an amazing piece of technology and has support for things
  like camera input and infinite canvas.
</p>
<h2 id="completing-support-for-cross-platform-events">
  Completing support for cross-platform events
</h2>
<p>
  A common complaint with Dioxus’ event system is its reliance on imperfect web
  standards. For Dioxus 0.3, we overhauled the public API for events to be more
  “Rusty.” Instead of shipping our own types like keyboard keys, we now provide
  an API comfortable for the everyday Rustacean. You can now do mouse position
  math with <code>euclid</code>, match on keys native to
  <code>keyboard-types</code>, and get helpful docs with cargo-doc. Dioxus also
  now provides better support for file upload and drag-and-drop operations by
  downcasting the native event type if it exists.
</p>
<p>

  <video controls autoplay muted>
      <source src="https://i.imgur.com/DHBvvVy.mp4" type="video/mp4">
  </video>
</p>
<p>
  Note that the old JS-like API is still available (but deprecated) and will be
  phased out in a future release of Dioxus.
</p>
<h2 id="lua-plugin-system-for-cli">Lua Plugin System for CLI</h2>
<p>
  The CLI has been overhauled with a ton of new features and improved
  ergonomics. One major improvement to the CLI is the addition of a Lua-based
  plugin system. In the future we to expand the plugin system to any
  WASI-compatible modules but have simply opted for Lua support in the short
  term while we figure out the API.
</p>
<h2 id="translations">Translations</h2>
<p>
  The community seems to really enjoy Dioxus! And they want their friends to
  know about Dioxus, too! But, our guides have not been available in every
  language that developers want. In this release, we’re adding two new languages
  to our guide:
</p>
<ul>
  <li>Chinese provided by @mrxiaux</li>
  <li>Portuguese provided by @whoeverdidthis</li>
</ul>
<h2 id="a-new-landing-page-and-better-docs">
  A new landing page and better docs
</h2>
<p>
  If you haven’t already noticed, our homepage is cleaner, more direct, and a
  bit more eye-catching. Check it out if you haven’t!
</p>
<p>
  As part of our translation and Rust-ification work, @renis has overhauled our
  guide to be more familiar for Rust developers. This skips some of the
  boilerplate (IE install Rust) and gets straight into the action of building
  Dioxus apps.
</p>
<h2 id="community-projects">Community Projects</h2>
<ul>
  <li>Styled components</li>
  <li>Opinionated starter pack</li>
  <li>Icon pack</li>
  <li>Caesar cyhper</li>
  <li>LED Strip controller</li>
  <li>GTK Renderer</li>
  <li>Formalize</li>
  <li>Story diagrammer</li>
  <li>Table crate</li>
  <li>Dioxus Helmet</li>
  <li>Skia renderer</li>
  <li>Use fetch</li>
  <li>Bevy Integration</li>
</ul>
